<template>
	<view>
		<view v-if="reletList.length > 0">
			<view class="boxContrainer" v-for="(item,index) in reletList" :key="index">
				<view class="contentBox">
					<view class="textItem">
						<text>下单时间</text>
						<text style="color: #333;">{{item.createTime}}</text>
					</view>
					<view class="textItem">
						<text>原预定时间</text>
						<text style="color: #333;">{{item.beforeTime}}</text>
					</view>
					<view class="textItem">
						<text>续租日期</text>
						<text style="color: #333;">{{item.afterTime}}</text>
					</view>
					<view class="textItem">
						<text>续租时长</text>
						<text style="color: #333;">{{item.renewDays}}天</text>
					</view>
					<view class="textItem" @click="changeOpen(item)">
						<text>续租总额</text>
						<view class="flex-row-center">
							<text style="color: #FF6600;">{{item.renewCost}}元</text>
							<u-icon :name="item.isOpen ? 'arrow-up' : 'arrow-down'" size="12"></u-icon>
						</view>
					</view>
                    <block v-if="item.isOpen">
						<view v-for="(costItem, index1) in item.cost.orderChargingItems" :key="index1"
							style="margin: 20rpx; 0">
							<view class="flex-row-center-sb" style="margin-bottom: 20rpx;">
								<text style="font-size: 28rpx;color: #666;">{{ costItem.chargeProjectName }}</text>
								<block v-if="costItem.isRent===1">
									<text style="font-size: 26rpx;color: #2879FF;"
										@click.stop="seeRentDetail(item.cost.orderPriceCalendars)">日租金明细</text>
								</block>
							</view>
						
							<uni-table ref="table" :loading="loading" border stripe>
								<uni-tr>
									<uni-th width="100" align="center"><text style="color: #2879FF;">单价</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">数目</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">费用</text>
									</uni-th>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">
										{{ costItem.unitPrice }}{{ costItem.chargeItemsType | chargeItemsType }}
									</uni-td>
									<uni-td align="center">{{ costItem.number }}</uni-td>
									<uni-td align="center">{{ costItem.chargeMoney}}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</block>
					
					<template v-if="item.canEdit">
						<view class="flex-row-end">
							<view class="btn-detail" @click.stop="editReletInfo(item.id)">编辑</view>
							<view class="btn-detail" @click.stop="cancleReletInfo(item.id)">取消</view>
						</view>
					</template>
					
				</view>
			</view>
		</view>
		<view v-else>
			<mescroll-empty></mescroll-empty>
		</view>


		<u-popup :show="showRentDetail" mode="center" @close="showRentDetail = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx;">费用租赁明细</view>
				<scroll-view scroll-y="true">
					<view style="max-height: 800rpx;">
						<view class="flex-row-center-sb payCostItem" v-for="(item, index) in orderPriceCalendars"
							:key="index">
							<text>{{item.sameDay}}</text>
							<text>{{item.price}}元</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import * as orderApi from '@/api/order-api.js';
	export default {
		name: '',
		data() {
			return {
				showRentDetail: false,
				orderPriceCalendars: []
			}
		},
		props: {
			reletList: {
				type: Array,
				default () {
					return []
				}
			},
			orderNo:{
				type:String,
				default:''
			}
		},
		mounted() {



		},
		methods: {
			seeRentDetail(orderPriceCalendars) {
				this.orderPriceCalendars = orderPriceCalendars;
				this.showRentDetail = !this.showRentDetail;
			},
			changeOpen(item) {
				item.isOpen=!item.isOpen;
				this.$forceUpdate();
			},
			// 编辑续租
			editReletInfo(id) {
				uni.navigateTo({
					url:'/order/shortOrder/editOrderRelet?id='+ id
				})
			},
			// 取消续租
			cancleReletInfo(id) {
				uni.showModal({
					title: '提示',
					content: '确定取消该续租记录吗?',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							orderApi
								.renewRecordDelete(this.orderNo, id)
								.then(res => {
									uni.$emit('refreshOrder');
									this.$u.toast('取消成功');
									
								});
						}
					}
				});
			}
			
		}

	}
</script>

<style lang="scss" scoped>
	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
		font-size: 28rpx;
		color: #333;
	}
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		// align-self: flex-end;
	}
</style>
